import React, { ReactElement } from 'react'
import { Input } from 'antd'
import styles from './skin.less'
import { connect } from 'umi'

const { TextArea } = Input

interface Props {
    changeHeroInfo: Function
}
const arr = [
    {
        title: "使用技巧",
        type: "usageTips"
    },
    {
        title: "对抗技巧",
        type: "battleTips"
    },
    {
        title: "团战思路",
        type: "teamTips"
    }
]

function Index({ changeHeroInfo }: Props): ReactElement {    
    return (
        <div>
            {
                arr.map((item, index) => {
                    return <div className={styles.flex} key={index}>
                        <span>
                            {item.title}
                        </span>
                        <div style={{
                            flex: 1
                        }}>
                            <TextArea onChange={(ev) => {
                                changeHeroInfo(item.type, ev.target.value)
                            }}/>
                        </div>
                    </div>
                })
            }
        </div>
    )
}

export default connect(() => {
    return {
        
    }
}, (dispatch) => {
    return {
        changeHeroInfo(classify: string, value: string) {
            dispatch({ type: "hero/changeHeroInfo", classify, value })
        }
    }
})(Index)
